<template>
  <div>
    <nav class="review-tab flex-bt mh-pd">
      <a :class="{active: activeNav === 1}" href="javascript:" @tap="switchTap(1)">图片</a>
      <a :class="{active: activeNav === 2}" href="javascript:" @tap="switchTap(2)">昵称</a>
      <a :class="{active: activeNav === 3}" href="javascript:" @tap="switchTap(3)">介绍</a>
      <a :class="{active: activeNav === 4}" href="javascript:" @tap="switchTap(4)">颜值</a>
      <a :class="{active: activeNav === 5}" href="javascript:" @tap="switchTap(5)">实名</a>
    </nav>
    <div class="review-view" v-show="activeNav === 1">
      <div class="pic-txt flex-bt">
<!--         <span>图片共 {{info.images.length}} 张</span>
        <span>已审 0 张</span>
        <span>未审 {{info.images.length}} 张</span> -->
      </div>

      <div class="pic-box">
        <img :src="pic">
      </div>

      <div class="btn-box">
        <button type="button" class="btn-sug" @click='getSubmit(1)'>给意见</button>
        <button type="button" class="btn-score" @click='getSubmit(2)'>审核通过</button>
      </div>
    </div>

    <div class="review-view" v-show="activeNav === 2">
      <div class="pic-txt flex-bt">
<!--         <span>昵称共 0 个</span>
        <span>已审 0 个</span>
        <span>未审 0 个</span> -->
      </div>

      <ul class="nick-list flex">
        <li class="nick-item">{{info.nickname}}</li>
      </ul>

      <div class="btn-box">
        <button type="button" class="btn-sug" @click='getSubmit(1)'>给意见</button>
        <button type="button" class="btn-score" @click='getSubmit(2)'>审核通过</button>
      </div>
    </div>

    <div class="review-view" v-show="activeNav === 3">
      <div class="pic-txt">
<!--         <span>介绍共 0 个</span>
        <span>已审 0 个</span>
        <span>未审 0 个</span> -->
      </div>

      <ul class="intro-list mh-pd">
        <li class="intro-item">{{info.text}}</li>
      </ul>

      <div class="btn-box">
        <button type="button" class="btn-sug" @click='getSubmit(1)'>给意见</button>
        <button type="button" class="btn-score" @click='getSubmit(2)'>审核通过</button>
      </div>
    </div>

    <div class="review-view" v-show="activeNav === 4">
      <div class="pic-txt flex-bt">
<!--         <span>图片共 0 张</span>
        <span>已审 0 张</span>
        <span>未审 0 张</span> -->
      </div>

      <div class="pic-box">
        <img :src="info.portrait">
      </div>

      <div class="btn-box">
        <button type="button" class="btn-sug" @click='getSubmit(1)'>给意见</button>
        <button type="button" class="btn-score" @click='getSubmit(2)'>审核通过</button>
      </div>
    </div>

    <div class="review-view" v-show="activeNav === 5">
      <div class="pic-txt flex-bt">
<!--         <span>身份证共 0 张</span>
        <span>已审 0 张</span>
        <span>未审 0 张</span> -->
      </div>

      <div class="card-positive card-box">
        <span class="card-label">身份证正面</span>
        <div class="card-pic">
          <img src="../../assets/images/bg/bg_card.png" alt="">
        </div>
<!--         <div class="card-info">
          <div class="m-info flex mh-pd">
            <div class="m-info-lt flex">
              <label>姓名</label>
              <input type="text">
            </div>
            <div class="m-info-rt flex">
              <label>性别</label>
              <input type="text">
            </div>
          </div>
          <div class="m-info flex mh-pd">
            <div class="m-info-lt flex">
              <label>出生年月</label>
              <input type="text">
            </div>
            <div class="m-info-rt flex">
              <label>民族</label>
              <input type="text">
            </div>
          </div>
          <div class="m-info flex mh-pd">
            <div class="m-info-lt flex">
              <label>住址</label>
              <input type="text">
            </div>
          </div>
          <div class="m-info flex mh-pd">
            <div class="m-info-lt flex">
              <label>号码</label>
              <input type="text">
            </div>
            <div class="m-info-rt flex">
              <button type="button" class="btn-reco">识别</button>
            </div>
          </div>
        </div> -->
      </div>
      <div class="card-negative card-box">
        <span class="card-label">身份证反面</span>
        <div class="card-pic">
          <img src="../../assets/images/bg/bg_card.png" alt="">
        </div>
<!--         <div class="card-info">
          <div class="m-info flex mh-pd">
            <div class="m-info-lt flex">
              <label>签发机构</label>
              <input type="text">
            </div>
          </div>

          <div class="m-info flex mh-pd">
            <div class="m-info-lt flex">
              <label>有效期限</label>
              <input type="text">
            </div>
            <div class="m-info-rt flex">
              <button type="button" class="btn-reco">识别</button>
            </div>
          </div>
        </div> -->
      </div>

      <div class="btn-box">
        <button type="button" class="btn-sug" @click='getSubmit(1)'>给意见</button>
        <button type="button" class="btn-score" @click='getSubmit(2)'>审核通过</button>
      </div>
    </div>
  </div>
</template>

<script>
  import {MH_API} from "@/api/api";
  export default {
    name: "friend-info",
    data () {
      return {
        activeNav: 1,
        pic: '',
        nickname: [
          // {
          //   id: '1',
          //   name: '夏日物语'
          // },
          // {
          //   id: '2',
          //   name: '夏日物语'
          // },
          // {
          //   id: '3',
          //   name: '夏日物语'
          // },
          // {
          //   id: '4',
          //   name: '夏日物语'
          // },
          // {
          //   id: '5',
          //   name: '夏日物语'
          // }
        ],
        introList: [
          // {
          //   id: '1',
          //   text: '天空不留下鸟的痕迹，但我已飞过。'
          // },
          // {
          //   id: '2',
          //   text: '天空不留下鸟的痕迹，但我已飞过。'
          // },
          // {
          //   id: '3',
          //   text: '天空不留下鸟的痕迹，但我已飞过。'
          // }
        ],
        faceList: [],
        face: 50,
        info: {},
        id: null
      }
    },
    methods: {
      getSubmit(type){
        console.log(type)
        let self = this;
        MH_API.examineUser({
          user_id: self.id,
          type: self.activeNav,
          status: type
        }).then(res => {
          if (res.status === 200) {
            mui.toast("操作成功")
          }
          else{
            mui.toast(res.msg)
          }
        })
      },
      switchTap (i) {
        this.activeNav = i;
      },
      // 颜值
      openFacePicker () {
        let _self = this;
        let picker = new mui.PopPicker();
        for (let i = 0; i <= 100; i++) {
          this.faceList.push({
            text: i,
            value: i
          })
        }
        picker.setData(this.faceList);
        picker.show(function (selectItems) {
          _self.face = selectItems[0].text;
        })
      },
    },
    created(){
      let id = this.$route.query.id;
      this.id = id;
      let self = this;
      let params = {};
      MH_API.getUserInfo({
        id: id
      }).then(res => {
        if (res.status === 200) {
          self.info = res.data;
          self.pic = res.data.images[0].image;
        }
      })
    }
  }
</script>

<style lang="scss" scoped>
  .review-tab>a {
    width: 5.5rem;
    height: 2.6rem;
    line-height: 2.6rem;
    border-radius: 1.3rem;
    background: #fcf3f6;
    color: #e685aa;
    text-align: center;
    font-size: 1.2rem;
    &.active {background: #e685aa;color: #fff;}
  }
  .pic-txt,.pic-box {
    padding: 0 2rem .5rem;
    border-bottom: .05rem solid #eee;
  }
  .pic-txt>span {font-size: 1.2rem; color: #666;}
  .pic-box {margin-top: 1rem}
  .pic-box>img {
    width: 100%;
    height: 36.2rem;
    overflow: hidden;
    border-radius: .4rem;
  }
  .nick-list {
    padding: 1.5rem 0;
    flex-wrap: wrap;
  }
  .nick-item {
    width: 50%;
    padding: 1rem 2rem;
  }
  .nick-items {
    width: 50%;
    padding: 1rem 2rem;
    background: url("../../assets/images/ico/ic_vo_uncheck.png") no-repeat 90% center;
    background-size: 1.8rem 1.85rem;
  }
  .nick-item.active {
    background: url("../../assets/images/ico/ic_vo_check.png") no-repeat 90% center;
    background-size: 1.8rem 1.85rem;
  }
  .intro-item {
    width: 100%;
    padding: 1rem;
  }
  .intro-items {
    width: 100%;
    padding: 1rem;
    background: url("../../assets/images/ico/ic_vo_uncheck.png") no-repeat right center;
    background-size: 1.8rem 1.85rem;
  }
  .btn-box {
    padding: 2rem 0;
    text-align: center;
  }
  .btn-sug,.btn-score {
    width: 8.5rem;
    height: 3.2rem;
    margin-right: 2rem;
    border: .05rem solid #e685aa;
    border-radius: 1.6rem;
    font-size: 1.5rem;
  }
  .btn-sug {
    color: #e685aa;
  }
  .btn-score {
    background: #e685aa;
    color: #fff;
  }
  .card-box {position: relative;}
  .card-label {
    position: absolute;
    padding: .05rem .3rem;
    border-top-right-radius: .8rem;
    border-bottom-right-radius: .8rem;
    left: 0;
    top: .2rem;
    background: #e685aa;
    color: #fff;
    font-size: .9rem;
  }
  .card-pic {
    width: 15.5rem;
    margin: .5rem auto;
    height: 10rem;
    img {
      width: auto;
      height: 100%;
    }
  }
  .m-info {
    flex-wrap: wrap;
    padding-top: .4rem;
    padding-bottom: 0;
  }
  .m-info-lt {
    width: 60%;
    &>label {
      display: inline-block;
      width: 8rem;
      font-size: 1.3rem;
      color: #666;
    }
    &>input {
      height: 2.5rem;
      border-radius: 0;
      margin-bottom: 0;
      margin-right: .4rem;
    }
  }
  .m-info-rt {
    width: 40%;
    &>label {
      display: inline-block;
      width: 3.65rem;
      font-size: 1.3rem;
      color: #666;
    }
    &>input {
      height: 2.5rem;
      border-radius: 0;
      margin-bottom: 0;
    }
  }
  .btn-reco {
    width: 100%;
    height: 2.5rem;
    background: #5da645;
    color: #fff;
    border-color: #5da645;
    font-size: 1.2rem;
  }
</style>
